import { GroupProps, useLoader } from "@react-three/fiber";
import { EffectComposer, Outline, Select, Selection } from "@react-three/postprocessing";
import { KernelSize } from "postprocessing";
import { useRef } from "react";
import { Material, Mesh } from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";


export function Show(props: GroupProps & { partsNames: string[], src: string }) {
    const { scene } = useLoader(GLTFLoader, props.src)
    const group = useRef<any>();
    const names = scene.children.map((element: any) => element.name)
    const meshes= scene.children

    const content = meshes.map((e:any) => {
        return (
            <Select key={e.name} enabled={props.partsNames.includes(e.name)}>
                <mesh geometry={e.geometry} material={e.material} />
            </Select >
        )
    })
    return (
        <Selection>
        <EffectComposer autoClear={false}>
            <Outline
                resolutionScale={1}
                kernelSize={KernelSize.MEDIUM}
                edgeStrength={100} 
                visibleEdgeColor={0xFF0000}
                blur={true} 
                xRay={true}
            />
        </EffectComposer>
        <group ref={group} {...props} dispose={null}>
            {content}
        </group>
        </Selection>
    );
}
